<template>
  <div class="page">
    <div class="weui-cells oditem">
      <div class="weui-cell">
        <div class="weui-cell__bd">产品</div>
      </div>
      <div v-for="(item,index) in result.details" :key="index">
      <div class="weui-cell" >
        <div class="weui-cell__hd">
          <img :src="item.product.showPic" mode="widthFix">
        </div>
        <div class="weui-cell__bd">
          <div class="p_title">{{item.product.spName}}</div>
        </div>
        <div class="weui-cell__ft">
          <div class="p_price">￥{{item.product.xsdj*0.01}}</div>
          <div class="p_number">x{{item.product.yxbj}}</div>
        </div>
      </div>

      <div class="weui-cell p_total cell_nb">
        <div class="weui-cell__bd">总价：</div>
        <div class="weui-cell__ft">￥{{item.product.xsdj*0.01*item.product.yxbj}}</div>
      </div>
      <div class="weui-cell cell_nb">
        <div class="weui-cell__bd"></div>
        <div class="weui-cell__ft p_payment">实付款：<span>￥{{item.product.xsdj*0.01*item.product.yxbj}}</span></div>
      </div>
      </div>
    </div>
    <div class="weui-cells oditem">
      <div class="weui-cell">
        <div class="weui-cell__bd">赠品</div>
      </div>
      <div class="weui-cell"  v-for="(item,index) in result.giveOrder" v-if="item.pw_flag=='P'" :key="index">
        <div class="weui-cell__hd">
          <img :src="item.showPic" mode="widthFix">
        </div>
        <div class="weui-cell__bd">
          <div class="p_title">{{item.spName}}</div>
        </div>
        <div class="weui-cell__ft">
          <div class="p_number">x{{item.qty}}</div>
        </div>
      </div>

    </div>
    <div class="weui-cells">
      <a class="weui-cell weui-cell_access"  href="/pages/coupon/main">
        <div class="weui-cell__bd">赠送优惠券</div>
        <div class="weui-cell__ft">查看全部</div>
      </a>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="coupon weui-flex" v-if=" result.ticketInfo.length" v-for="(item,index) in result.ticketInfo"  :key="index">
            <img class="coupon_bg" src="../../../static/images/archbg.png" mode="widthFix">
            <div class="coupon_value" >
              <div class="coupon_number" v-if="item.ticketDef.ticketType==1">{{item.ticketDef.discount}}</div>
              <div class="coupon_number" v-if="item.ticketDef.ticketType==0">{{item.ticketDef.description}}</div>
              <div class="spec" v-if="item.ticketDef.ticketType==1">折</div>
              <div class="spec" v-if="item.ticketDef.ticketType==0">元</div>
            </div>
            <div class="weui-flex__item coupon_info">
              <div class="coupon_title">{{item.ticketDef.ticketName}}</div>
              <div class="weui-flex">
                <div class="weui-flex__item coupon_condition" v-if="item.ticketDef.leastCost">满{{item.ticketDef.leastCost}}元使用</div>
                <div class="weui-flex__item coupon_condition" v-else></div>

              </div>
              <div class="coupon_data">{{item.begin}} 至 {{item.end}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">订单编号：</div>
            <div>{{result.orderNo}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">购买时间：</div>
            <div>{{result.openDate||result.orderTime}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">交易店铺：</div>
            <div>{{result.merchantName||''}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">交易时间：</div>
            <div>{{result.orderTime||''}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">支付方式：</div>
            <div>{{result.paySource||''}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">订单价值金额：</div>
            <div>¥{{result.amount*0.01}}</div>
          </div>
          <div class="weui-flex txtrow">
            <div class="weui-flex__item">订单余额：</div>
            <div class="red">¥{{result.amount*0.01}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import * as appId from "@/utils/util"
 import {getTIme} from "@/utils/util"
export default {
  data () {
    return {
      current: 0,
      arr1:[],
      paySource:[{
        name:"pos销售支付(线下)",
        value:1
      },{
        name:"微信线上支付",
        value:2
      },{
        name:"支付宝线上支付",
        value:3
      }],
      result:{

      }
    }
  },
   onLoad(options){
    this.id=options.id;

  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "订单详情"
    })
     this.getOrderDetail()
  },
  methods: {
    getTIme,
    getOrderDetail(){
        let that=this;
            this.$http.post(

                    "/v1.0/appletLogin/orderDetail",
                    {orderId:that.id}

          ).then((data)=>{

            if(data.code==0){
                this.result=data.result;
              this.result.orderTime=this.getTIme(this.result.orderTime)

              this.result.details.forEach((a,i)=>{
                // a.
                this.result.openDate=this.getTIme(a.saleOrder.openDate);
                this.result.merchantName=a.saleOrder.merchantDef.merchantName;
                this.result.payDesc=a.saleOrder.payDesc;

                let arr=this.paySource.filter((item)=>{
                  return item.value==a.saleOrder.paySource
                })[0]
                this.result.paySource=arr.name;
              })
              this.result.ticketInfo.forEach((a,i)=>{
                a.begin=this.getTIme(a.startTime);
                a.end=this.getTIme(a.expriyTime);
                if(a.expriyTime<new Date().getTime()){
                  a.isOut=false;
                }else{
                  a.isOut=true;
                }
              })
            }else{
                wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
            }
          }).catch((err)=>{
              wx.showToast({
              title:  "请求失败",
              icon: 'none',
              duration: 2000
            })
          })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.oditem .weui-cell{
  -webkit-box-align: inherit;
  -webkit-align-items: inherit;
  align-items: inherit;
}
.oditem img{
  width: 5em;
  height: 5em;
  margin-right: 0.6em;
  border-radius: 0.3em;
}
.p_price{
  color: #E4393C;
}
.p_number{
  color: #999;
  font-size: 0.9em;
}
.p_title{
  line-height: 1.8em;
}
.p_other{
  font-size: 0.8em;
  color:#888;
  line-height: 1.8em;
}
.p_total{
  color: #999;
  font-size: 0.9em;
}
.p_payment{
  color: #333;
  padding-bottom: 0.8em;
}
.p_payment span{
  color: #E4393C;
}
.cell_nb{
  padding-top: 0px;
  padding-bottom: 0px;
}
.cell_nb:before{
  display: none;
}
.coupon{
  position: relative;
  margin: 0.4em 0.8em;
  padding-bottom: 1em;
  overflow: hidden;
}
.coupon_bg{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
.coupon_value{
  width: 33.3333%;
  text-align: center;
  position: relative;
}
.coupon_value .coupon_number{
  position: absolute;
  width: 100%;
  height: 2em;
  line-height: 2em;
  top: 50%;
  margin-top: -1em;
  left: 0px;
  color: #fff;
  font-size: 1.8em;
}
.coupon_value .spec{
  position: absolute;
  top: 0px;
  right: 0px;
  background: #FF787E;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  line-height: 1.4em;
  font-size: 0.8em;
  text-align: center;
  border: 1px #fff solid;
  color: #fff;
}
.coupon_info{
  position: relative;
  z-index: 99;
  padding: 0.6em;
}
.coupon_info .coupon_title{
  color: #333;
  font-size: 0.9em;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}
.coupon_info .coupon_condition{
  font-size: 0.8em;
  color: #FF787E;
}
.coupon_info .usebtn{
  width: 4.6em;
  height: 1.6em;
  color: #FF787E;
  border: 1px #FF787E solid;
  display: block;
  border-radius: 0.8em;
  line-height: 1.6em;
  text-align: center;
  font-size: 0.8em;
}
.coupon_info .usebtn_used{
  border: 1px #aaa solid;
  color: #999;
}
.coupon_data{
  font-size: 0.7em;
  color: #999;
  margin-top: 0.3em;
}
.txtrow div{
  font-size: 0.9em;
  color: #333;
  line-height: 1.8em;
}
.txtrow .weui-flex__item{
  color: #999;
}
.txtrow .red{
  color: #FF787E;
}
</style>
